<template>
  <div class="messsagebox">
    <div class="mseleft">
      <div class="titlebox">
        <h3>留言区</h3>
        <span class="color"></span>
      </div>
      <el-input
        placeholder="请输入昵称"
        maxlength="10"
        show-word-limit
        prefix-icon="el-icon-user-solid"
        v-model="name"
        clearable
        :disabled="disabled"
      ></el-input>
      <el-input
        type="textarea"
        maxlength="150"
        show-word-limit
        placeholder="请输入内容"
        v-model="content"
        clearable
        resize="none"
        rows="4"
        id="message"
      ></el-input>
      <div class="btubox icon">
        <img
          class="emoji-panel-btn"
          src="/images/face.png"
          @click="showEmoji = !showEmoji"
        />
        <el-button
          type="primary"
          icon="el-icon-s-promotion"
          @click="postmessage"
          style="marginLeft:10px"
          >发表留言</el-button
        >
        <emoji-panel
          top="-175px"
          left="55px"
          @emojiClick="appendEmoji"
          v-if="showEmoji"
        ></emoji-panel>
      </div>
      <div class="titlebox">
        <span class="color"></span>
        <h3>查找区</h3>
      </div>
      <el-input
        placeholder="输入昵称后即可查找相关留言"
        maxlength="10"
        show-word-limit
        prefix-icon="el-icon-search"
        v-model="serachName"
        clearable
      ></el-input>
      <div class="btubox searchbox">
        <el-button type="primary" icon="el-icon-search" @click="serachall"
          >查看所有</el-button
        >
        <el-button type="primary" icon="el-icon-search" @click="serachmessage"
          >立即查找</el-button
        >
      </div>
    </div>
    <div class="mseright">
      <div class="boxtitle">留言板</div>
      <div class="scrollbox">
        <vue-scroll :ops="ops">
          <div>
            <el-card
              class="box-card"
              v-for="(item, index) in messageArray"
              :key="index"
            >
              <div slot="header" class="clearfix">
                <span class="userName" :class="{ adminName: item.isAdmin }"
                  >{{ item.isAdmin ? admin.userName : item.name }}
                  <i class="active" v-if="item.isAdmin">(博主)</i>
                </span>
                <span class="date" :class="{ adminDate: item.isAdmin }">{{
                  item.date
                }}</span>
              </div>
              <div class="msgcont">
                <div
                  :class="{ admincont: item.isAdmin }"
                  v-html="item.content"
                  class="contbox"
                ></div>
                <div class="c_opera">
                  <i
                    class="iconfont icon-message"
                    style="fontSize:18px"
                    @click="changeIndex(index)"
                    >({{ item.children ? item.children.length : 0 }})</i
                  >
                </div>
                <div v-if="index == currentIndex">
                  <com-item
                    top="-90px"
                    left="10px"
                    @handleCom="
                      handleCom($event, {
                        toUser: item,
                        id: item._id,
                      })
                    "
                  ></com-item>
                  <div class="childcomt" v-if="item.children.length">
                    <div
                      class="child_item"
                      v-for="(item2, index2) in item.children"
                      :key="index2"
                    >
                      <div class="namebox">
                        <span
                          class="from"
                          :class="item2.fromUser.isAdmin ? 'active' : ''"
                          >{{
                            item2.fromUser.isAdmin
                              ? admin.userName
                              : item2.fromUser.name
                          }}
                          <i class="active" v-if="item2.fromUser.isAdmin"
                            >(博主)</i
                          >
                        </span>
                        <span>回复</span>
                        <span
                          class="to"
                          :class="item2.toUser.isAdmin ? 'active' : ''"
                          >{{
                            item2.toUser.isAdmin
                              ? admin.userName
                              : item2.toUser.name
                          }}
                          <i class="active" v-if="item2.toUser.isAdmin"
                            >(博主)</i
                          >
                        </span>
                      </div>
                      <div class="c_content" v-html="item2.c_content"></div>
                      <div class="c_other">
                        <div class="c_time">
                          {{ item2.c_date }}
                        </div>
                        <div class="c_opera">
                          <i
                            class="iconfont icon-message"
                            @click="chageComIndex(index, index2)"
                            style="fontSize:15px"
                          ></i>
                        </div>
                      </div>
                      <div
                        v-if="-Math.ceil(index + 1) + '' + index2 == comIndex"
                      >
                        <com-item
                          top="-90px"
                          left="-10px"
                          @handleCom="
                            handleCom($event, {
                              toUser: item2.fromUser,
                              id: item._id,
                            })
                          "
                        ></com-item>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </vue-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import { PostMessage, GetMessage, PushChild } from "../../api/index"
import comItem from "../../components/comment/comitem"
import EmojiPanel from "../../components/emoji/EmojiPanel"
export default {
  name: "message",
  data() {
    return {
      admin: "",
      name: "",
      content: "",
      serachName: "",
      disabled: false,
      crrentPage: 1,
      maxPage: 0,
      showEmoji: false,
      showReply: false,
      limit: 6,
      messageArray: [],
      comIndex: 0,
      currentIndex: -1,
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {},
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: true,
          background: "#b3c0d1",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false,
        },
      },
    }
  },
  created() {
    this.getmessage({ name: "" })
  },
  mounted() {
    this.admin = this.$store.state.admin
    this.disabled = this.$store.state.isLogin
  },
  components: {
    EmojiPanel,
    comItem,
  },
  methods: {
    changeIndex(index) {
      if (this.currentIndex == index) {
        this.currentIndex = -1
      } else {
        this.currentIndex = index
      }
    },
    chageComIndex() {
      let index = -[Math.ceil(arguments[0] + 1) + "" + arguments[1]]
      if (this.comIndex == index) {
        this.comIndex = 0
      } else {
        this.comIndex = index
      }
    },
    // 发布留言
    postmessage() {
      if (this.name == "" || this.content == "") {
        this.$notify.error({
          title: "错误",
          message: "昵称或者内容不能为空",
        })
      } else {
        this.content = this.content.replace(/:.*?:/g, this.emoji) // 替换":"符号包含的字符串,通过emoji方法生成表情<span></span>
        PostMessage({ name: this.name, content: this.content }).then((res) => {
          if (res.status) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
            })
            this.getmessage({ name: "" })
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 获取留言
    async getmessage(args) {
      let res = await GetMessage(args)
      if (res.status) {
        this.messageArray = res.data
        this.name = ""
        this.content = ""
      } else {
        this.$message.error(res.msg)
      }
      this.messageArray = this.messageArray.map((item) => {
        if (item.children) {
          item.children = item.children.reverse()
        }
        return item
      })
    },
    serachall() {
      this.getmessage({ name: "" })
    },
    // 查找留言
    serachmessage() {
      this.getmessage({ name: this.serachName })
    },

    // 回复留言
    async handleCom(child, obj) {
      let req = {
        fromUser: {
          name: child.fromUser.name,
          isAdmin: child.fromUser.isAuthor,
        },
        c_content: child.c_content,
        c_date: this.$dateFormat("YYYY-mm-dd HH:MM:SS", child.c_date),
        toUser: {
          name: obj.toUser.name,
          isAdmin: obj.toUser.isAdmin,
        },
        parentId: obj.id,
      }
      let result = await PushChild(req)
      this.getmessage()
      this.comIndex = 0
    },
    emoji(word) {
      // 生成html
      const type = word.substring(1, word.length - 1)
      return `<span class="emoji-item-common emoji-${type} emoji-size-small" ></span>`
    },
    // EmojiPanel触发的事件
    appendEmoji(text) {
      const el = document.getElementById("message")
      this.content = el.value + ":" + text + ":"
      this.showEmoji = false
    },
  },
}
</script>
<style lang="scss" scoped>
.messsagebox {
  margin: 20px;
  height: calc(100% - 40px);
  width: 1000px;
  background: white;
  display: flex;
  .mseleft {
    width: 500px;
    background: white;
    padding: 20px;
    .el-textarea {
      margin: 20px 0px;
    }
    .btubox {
      text-align: right;
      margin-bottom: 40px;
    }
    .searchbox {
      margin-top: 20px;
    }
    .titlebox {
      position: relative;
      height: 50px;
      width: 200px;
      .color {
        position: absolute;
        height: 20px;
        width: 10px;
        background: rgb(10, 105, 168);
        top: 0px;
        left: -20px;
        z-index: 1;
      }
    }
  }
  .mseright {
    width: 500px;
    background: rgb(224, 226, 230);
    padding: 0px 10px;
    padding-top: 60px;
    position: relative;
    .boxtitle {
      background: white;
      width: 100px;
      border-radius: 5px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      position: absolute;
      top: 10px;
      left: 10px;
      font-weight: bold;
      font-size: 18px;
      box-shadow: 0 5px 8px rgba(10, 16, 20, 0.24),
        0 0 8px rgba(10, 16, 20, 0.12);
    }
    .scrollbox {
      height: calc(100% - 10px);
      .el-card {
        width: 450px;
        margin: 10px 20px;
        .clearfix {
          display: flex;
          justify-content: space-between;
          .userName {
            font-size: 18px;
            font-weight: bold;
            color: rgb(121, 122, 122);
          }
          .adminName {
            color: rgb(50, 132, 170);
          }
          .date {
            color: rgb(206, 201, 201);
            font-size: 15px;
          }
          .adminDate {
            color: rgb(52, 117, 148);
          }
        }
        .msgcont {
          font-size: 15px;
          color: rgb(91, 95, 95);
          word-break: break-all;
          line-height: 20px;
        }
        .admincont {
          color: rgb(47, 49, 49);
        }
      }
    }
  }
}
.icon {
  position: relative;
  .emoji-panel-btn {
    display: inline-block;
    height: 35px;
    width: 35px;
    vertical-align: middle;
    &:hover {
      cursor: pointer;
      opacity: 0.8;
    }
  }
  .iconfont {
    cursor: pointer;
    color: #f7ba2a;
    vertical-align: bottom;
  }
  .emoji-box {
    position: absolute;
    z-index: 10;
    left: 20px;
    top: -215px;
    box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.2);
    background: white;
    .btn {
      position: absolute;
      border: none;
      right: 5px;
      top: 5px;
      z-index: 10;
    }
    .btn:hover {
      cursor: pointer;
      color: red;
    }
    .arrow {
      left: 10px;
    }
  }
}
.messsagebox > div {
  flex: 1;
}
.c_opera {
  text-align: right;
  i {
    color: rgb(194, 194, 194);
    margin-left: 15px;
  }
  i:hover {
    cursor: pointer;
  }
}
.childcomt {
  margin: 10px 5px;
  padding: 10px;
  background: #f7f7f7;
  .child_item {
    margin: 10px 0px;
    padding-bottom: 5px;
  }
  .child_item:not(:first-child) {
    padding-top: 15px;
    border-top: 1px solid #bfcbd9;
  }
  .c_content {
    line-height: 25px;
    margin: 10px 0px;
    margin-left: 20px;
    font-size: 14px;
    color: rgb(121, 121, 121);
  }
  .c_other {
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    .c_time {
      color: rgb(194, 194, 194);
      font-size: 15px;
    }
    .c_opera {
      text-align: right;
      i {
        color: rgb(194, 194, 194);
        margin-left: 15px;
      }
      i:hover {
        cursor: pointer;
      }
    }
  }
  .namebox {
    span {
      font-size: 15px;
      color: rgb(177, 175, 175);
    }
    .from {
      margin-right: 10px;
      color: rgb(79, 81, 83);
    }
    .to {
      margin-left: 10px;
      color: rgb(79, 81, 83);
    }
  }
}
.active {
  color: rgb(50, 132, 170) !important;
}
i {
  font-style: normal;
}
.contbox {
  vertical-align: middle;
}
</style>
<style lang="scss">
.emoji-item-common {
  background: url("/images/emoji_sprite.png");
  display: inline-block;
  margin-top: 2px;
  &:hover {
    cursor: pointer;
  }
}
.emoji-size-small {
  // 表情大小
  zoom: 0.4;
  vertical-align: top;
}
.emoji-size-large {
  zoom: 0.5; // emojipanel表情大小
  margin: 4px;
}
.comments-list {
  margin-top: 20px;
  .comments-list-item {
    margin-bottom: 20px;
    .comments-list-item-heading {
      display: inline-block;
      img {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        vertical-align: middle;
      }
      .comments-list-item-username {
        margin-left: 5px;
        font-weight: bold;
      }
    }
    .comments-list-item-content {
      margin: 10px 0px;
      border-bottom: 1px solid #cccccc;
      &:last-child {
        border-bottom: 0;
      }
      span {
        vertical-align: top;
      }
    }
  }
}
</style>
